<!-- 中转wms快速签入 -->
<template>
  <el-dialog :close-on-click-modal="false" :title="$tt('label_quick_receiving')" :visible.sync="visible"
    custom-class="dialog_big">
    <el-form :model="form" ref="form">
      <ex_super_table ref="table" :model="tableBaseModel" :data="form.tableList" height="600">

      </ex_super_table>

    </el-form>


    <span slot="footer" class="dialog_footer">
      <el-button @click="visible = false">{{ $tt('label_cancel') }}</el-button>
      <el-button type="primary" @click="submitQuickTackDelivery">{{ $tt('label_submit') }}</el-button>
    </span>
  </el-dialog>
</template>

<script>
import volume_input from '@/component/wms/volume_input.vue';
export default {
  name: 'transfer_quick_receive',
  components: { volume_input },
  data() {
    return {
      visible: false,
      form: {
        tableList: [],
      },

      tableBaseModel: [
        { key: 'code', label: 'label_inbound_code', 'min-width': 140, 'show-overflow-tooltip': true, },
        { key: 'customerCode', label: 'label_customer_info', 'width': 120, 'show-overflow-tooltip': true, },
        { key: 'expectBoxQty', label: 'label_plan_inbound_box_count', 'width': 100, },
        { key: 'expectSkuQty', label: 'label_plan_inbound_sku_count', 'width': 100, },
        { key: 'expectBoxQty', label: 'label_actual_inbound_box_count', 'width': 100, },
        { key: 'expectSkuQty', label: 'label_actual_inbound_sku_count', 'width': 100, },




        // { key: 'temporaryAreaId', label: 'label_inbound_warehouse_area', slot: 'temporaryAreaId', slot_header: "headerArea", width: 200, },
        // { key: 'temporaryLocationId', label: 'label_inbound_warehouse_location', slot: 'temporaryLocationId', width: 200, },

        {
          key: 'temporaryAreaId', label: 'label_inbound_warehouse_area', 'width': 180,
          keyShowForce: [true],
          renderHeader: (h, { column }) => {
            return (<div>
              <div>{this.$tt(column.label)}</div>
              <ex_dropdown_auto label='label_unified_select' size='mini' storeData option={{ label: 'labelStr', value: 'id' }}
                url='/wms-api/base/WmsBaseAreaRpc/selectAllLabel.json' onCommand={this.selectAllArea} />
            </div>)
          },
          render: (h, { row, index, column }) => {
            const value = row[column.property]
            const rule = this.formRules[column.property]
            return (
              <el-form-item
                prop={`tableList.${index}.${column.property}`}
                rules={rule}
              >
                <ex_super_input
                  type="base_area_select"
                  class="w_fill"
                  clearable={false}
                  value={value}
                  onInput={value => this.$set(row, column.property, value)}
                  onChangeItem={e => this.changeArea(e, row)}
                />
              </el-form-item>
            );
          }
        },
        {
          key: 'temporaryLocationId', label: 'label_inbound_warehouse_location', 'width': 180,
          keyShowForce: [true],
          'label-class-name': 'label_require_before',
          render: (h, { row, index, column }) => {
            return (
              <el-form-item
                prop={`tableList.${index}.${column.property}`}
              >
                <ex_super_input
                  type="base_location_select"
                  class="w_fill"
                  clearable={false}
                  areaId={row.temporaryAreaId}
                  value={row.temporaryLocationId}
                  onInput={value => {
                    this.$set(row, 'temporaryLocationId', value)
                  }}
                  onChangeItem={e => {
                    row.temporaryLocationCode = e ? e.code : null
                  }}
                >
                </ex_super_input>
              </el-form-item>
            );
          }
          // component: ({ row, $index, }) => {
          //   return {
          //     type: 'base_location_select', class: 'w_fill',
          //     attrs: { areaId: row.temporaryAreaId, clearable: false, },
          //     on: { changeItem: (e) => e ? row.temporaryLocationCode = e.code : null }
          //   }
          // },
        },
        {
          key: 'receivingBoxQty', label: 'label_receiving_box_number', 'width': 140, if: () => this.form.tableList.some(row => row.boxIsEmpty == 'Y'),
          render: (h, { column, row, index }) => {
            if (row.boxIsEmpty != 'Y') return ""
            const value = row[column.property]
            return (
              <el-form-item
                prop={`tableList.${index}.${column.property}`}
                rules={this.formRules[column.property]}
              >
                <el-input-number
                  value={value} min={0} class="w_fill"
                  onInput={value => {
                    this.$set(row, column.property, value)
                  }}
                  placeholder={this.$tt('label_receiving_box_number')}
                >
                </el-input-number>
              </el-form-item>
            );
          }
        },
        {
          key: 'measureWeight', label: 'label_measure_box_weight', 'width': 160, if: () => this.form.tableList.some(row => row.boxIsEmpty != 'Y'),
          render: (h, { column, row, index }) => {
            if (row.boxIsEmpty == 'Y') return ""

            return (
              <el-form-item
                prop={`tableList.${index}.${column.property}`}
                rules={this.formRules[column.property]}

              >
                <ex_super_input
                  value={row.measureWeight}
                  onInput={value => {
                    this.$set(row, 'measureWeight', value)
                  }}
                  placeholder={this.$tt('label_measure_weight')}
                  append="kg" appendClass="input_slot_div_mini"
                >
                </ex_super_input>
              </el-form-item>
            );
          }
        },
        {
          key: 'measureVolume', label: 'label_measure_box_volume', 'min-width': 240, if: () => this.form.tableList.some(row => row.boxIsEmpty != 'Y'),
          renderHeader: (h, { column, $index }) => (<div>
            <div >{column.label}</div>
            <el-button-group>
              <el-button size="mini" onClick={e => this.$refs.table.$refs.volume_input.forEach(vi => vi.changeType('LWH'))}> {this.$tt('label_lwh')}</el-button>
              <el-button size="mini" onClick={e => this.$refs.table.$refs.volume_input.forEach(vi => vi.changeType('V'))}>{this.$tt('label_volume')}</el-button>
            </el-button-group>
          </div>),
          render: (h, { column, row, index }) => {
            if (row.boxIsEmpty == 'Y') return ""
            return (
              <el-form-item
                prop={`tableList.${index}.${column.property}`}
                rules={this.formRules[column.property]}
              >
                {
                  h(volume_input, {
                    ref: 'volume_input',
                    refInFor: true,
                    props: {
                      value: row.measureVolume,
                      placeholderLWH: this.$tt('label_l_w_h'),
                      placeholderV: this.$tt('label_measure_volume'),
                    },
                    on: {
                      input: (e) => this.$set(row, 'measureVolume', e)
                    }
                  })
                }

              </el-form-item>
            );
          }
        },
      ],
      formRules: {
        receivingBoxQty: { type: 'number', message: this.$tt('tip_can_no_empty'), min: 1, required: true, },
        temporaryAreaId: { type: 'string', message: this.$tt('tip_can_no_empty'), required: true, },
        measureWeight: {
          required: true, trigger: 'change',
          validator: (r, v, cb) => {
            if (!_.isEmpty(v) && !this.$reg.DigitNumber(v, 3, 9)) {
              return cb(this.$tt("tip_only_digit_int_length", { digit: 3, int: 9 }))
            }
            cb()
          }
        },
        measureVolume: {
          required: true, trigger: 'change',
          validator: (r, v, cb) => {
            if (!_.isEmpty(v)) {
              if (Number.isNaN(v)) {
                return cb(this.$tt("tip_lwh_use_split"))
              } else if (!this.$reg.DigitNumber(v, 6, 9)) {
                return cb(this.$tt("tip_only_digit_int_length", { digit: 6, int: 9 }))
              }
            }
            cb()
          }
        },
      },
    }
  },
  props: {
  },
  methods: {
    selectAllArea(e) {
      this.form.tableList.forEach(it => {
        if (it.temporaryAreaId != e.id) {
          this.changeArea(e, it)
        }
      })
    },
    changeArea(it, row) {
      if (!it) it = { code: null, id: null }
      this.$set(row, 'temporaryAreaId', it.id)
      this.$set(row, 'temporaryAreaCode', it.code)
    },
    show({ tableList }) {
      tableList.forEach(it => {
        it.temporaryAreaId = null
        it.temporaryLocationId = null

      })
      this.form.tableList = tableList

      this.visible = true

    },


    submitQuickTackDelivery() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          let receivingList = this.form.tableList.map(it => {
            return {
              id: it.id,
              receivingBoxQty: it.receivingBoxQty,
              temporaryAreaId: it.temporaryAreaId,
              temporaryAreaCode: it.temporaryAreaCode,
              temporaryLocationId: it.temporaryLocationId,
              temporaryLocationCode: it.temporaryLocationCode,
              measureWeight: it.measureWeight,
              measureVolume: it.measureVolume,
            }
          })
          this.$ajax({
            url: "/wms-api/inbound/WmsInboundTransitReceivingRpc/receivingBatch.json",
            method: 'post',
            type: 'json',
            loading: this.$tt('tip_submiting'),
            data: { receivingList },
            success: (res) => {
              this.$message.success(this.$tt("tip_submit_success"))
              this.$emit("submitSuccess")
              this.visible = false
            },
          })
        } else {
          this.$message.error(this.$t('form_validate_error'))
          return false;
        }
      });
      return
      // if (this.tableList.some(it => !it.temporaryAreaId)) {
      //   return this.$message.error(this.$tt("tip_please_select_warehouse_area"))
      // }




    }

  }
}
</script>
